<template>
  <a-modal
    :open="visible"
    title="编辑用户信息"
    @ok="handleOk"
    @cancel="handleCancel"
    :confirm-loading="loading"
  >
    <a-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      layout="vertical"
    >
      <a-form-item label="用户名" name="userName">
        <a-input v-model:value="formData.userName" placeholder="请输入用户名" />
      </a-form-item>

      <a-form-item label="用户简介" name="userProfile">
        <a-textarea
          v-model:value="formData.userProfile"
          placeholder="请输入用户简介"
          :rows="3"
        />
      </a-form-item>

      <a-form-item label="用户角色" name="userRole">
        <a-select v-model:value="formData.userRole" placeholder="请选择用户角色">
          <a-select-option value="user">普通用户</a-select-option>
          <a-select-option value="admin">管理员</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="头像URL" name="userAvatar">
        <a-input v-model:value="formData.userAvatar" placeholder="请输入头像URL" />
      </a-form-item>

      <a-form-item v-if="formData.userAvatar" label="头像预览">
        <a-image :src="formData.userAvatar" :width="100" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { message } from 'ant-design-vue'
import { updateUserUsingPost } from '@/api/userController'

interface Props {
  visible: boolean
  userData?: API.UserVO
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  userData: undefined
})

const emit = defineEmits<Emits>()

const formRef = ref()
const loading = ref(false)

// 表单数据
const formData = reactive<API.UserUpdateRequest>({
  id: '',
  userName: '',
  userProfile: '',
  userRole: 'user',
  userAvatar: ''
})

// 表单验证规则
const rules = {
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 1, max: 20, message: '用户名长度在1-20个字符', trigger: 'blur' }
  ],
  userRole: [
    { required: true, message: '请选择用户角色', trigger: 'change' }
  ]
}

// 监听用户数据变化，更新表单
watch(() => props.userData, (newData) => {
  if (newData) {
    formData.id = newData.id || ''
    formData.userName = newData.userName || ''
    formData.userProfile = newData.userProfile || ''
    formData.userRole = newData.userRole || 'user'
    formData.userAvatar = newData.userAvatar || ''
  }
}, { immediate: true })

// 确认提交
const handleOk = async () => {
  try {
    await formRef.value.validate()
    loading.value = true

    const res = await updateUserUsingPost(formData)
    if (res.data.code === 0) {
      message.success('更新用户信息成功')
      emit('success')
      emit('update:visible', false)
    } else {
      message.error('更新失败：' + res.data.message)
    }
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    loading.value = false
  }
}

// 取消
const handleCancel = () => {
  emit('update:visible', false)
}
</script>
